// 旋转
@keyframes tyggxh {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
// 列表向上堆入动画
@keyframes itemSlideIn {
    from {
        transform: translate3d(0, 400%, 0);
        visibility: visible;
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
// 列表向下消失动画
@keyframes slideOutDown {
    0% {
        transform: translateZ(0);
        opacity: 1;
    }
    to {
        visibility: hidden;
        transform: translate3d(0, 400%, 0);
        opacity: 0;
    }
}

// 按钮点击播放动画
@keyframes iconPlay {
    0% {
        right: 20px;
        top: 232px;
    }
    15% {
        right: 20px;
        top: 230px;
    }
    30% {
        right: 20px;
        top: 234px;
    }
    45% {
        right: 20px;
        top: 232px;
    }
    60% {
        right: 20px;
        top: 232px;
    }
    100% {
        right: calc(100% / 2 - 28px);
        top: calc(100% / 2 - 28px);
    }
}

// 按钮点击暂停动画
@keyframes iconPlayPause {
    0% {
        right: calc(100% / 2 - 28px);
        top: calc(100% / 2 - 28px);
    }
    15% {
        right: calc(100% / 2 - 28px);
        top: calc(100% / 2 - 30px);
    }
    30% {
        right: calc(100% / 2 - 28px);
        top: calc(100% / 2 - 26px);
    }
    45% {
        right: calc(100% / 2 - 28px);
        top: calc(100% / 2 - 28px);
    }
    60% {
        right: calc(100% / 2 - 28px);
        top: calc(100% / 2 - 28px);
    }
    100% {
        right: 20px;
        top: 232px;
    }
}

// 图片变小
@keyframes imagePlay {
    0% {
        top: 0;
        transform: translate(0, 0) scale(1);
        border-radius: 0;
        height: 0;
        padding-top: 260px;
    }
    20% {
        top: 0;
        transform: translate(0, 0) scale(1);
        border-radius: 0;
        height: 0;
        padding-top: 260px;
    }
    100% {
        top: 50%;
        transform: translate(0, -50%) scale(0.6);
        border-radius: 50%;
        height: 0;
        padding-top: 100%;
    }
}
// 图片变大
@keyframes imagePlayPause {
    0% {
        top: 50%;
        transform: translate(0, -50%) scale(0.6);
        border-radius: 50%;
        height: 0;
        padding-top: 100%;
    }
    60% {
        top: 0;
        transform: translate(0, 0) scale(1);
        border-radius: 50%;
        height: 0;
        padding-top: 100%;
    }
    70% {
        left: 0;
        top: 0%;
        transform: translate(0, 0) scale(1);
        border-radius: 50%;
        padding-top: 100%;
    }
    95% {
        left: 0;
        top: 0;
        border-radius: 0;
        padding-top: 100%;
    }
    100% {
        width: 100%;
        top: 0;
        border-radius: 0;
        padding-top: 260px;
    }
}
